<template>
    <div class="content">
        <el-dialog :visible.sync="adjustmentData.dialogFormVisible" title="将所选对象调入" size="tiny" :before-close="handleClose">
            <div v-loading="upLoaing">
              <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item v-if="this.adjustmentData.family.grade" label="年级" prop="gradeName" :rules="rulesSelet">
                            <el-select v-model="ruleForm.gradeName" placeholder="请选择" style="width:100%;" @change="queryAllClass( ruleForm.gradeName )">
                              <el-option v-for="item in gradeList" :key="item.grade" :label="item.gradeName" :value="item.grade">
                              </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item v-if="this.adjustmentData.family.grade" label="班级编号" prop="classNum" :rules="rulesSelet">
                            <el-select v-model="ruleForm.classNum" placeholder="请选择" style="width:100%;" @change="classChange">
                              <el-option v-for="item in classList" :key="item" :label="item.sClassNum" :value="item.pId">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-else label="班级编号" prop="classNum" :rules="rulesSelet">
                            <el-select v-model="ruleForm.classNum" placeholder="请选择" style="width:100%;" @change="classChange">
                              <el-option v-for="item in classList" :key="item" :label="item.sClassNum" :value="item.pId">
                              </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="班级名称" prop="sNickName" :rules="rulesSelet">
                            <el-select v-model="ruleForm.sNickName" filterable remote reserve-keyword placeholder="请选择" style="width:100%;" :remote-method="queryAllClassName" :loading="loading" @change="nameChange">
                              <el-option v-for="item in classNameArray" :key="item.sClassNum" :label="item.sNickName" :value="item.pId">
                              </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <div class="title"><i>*</i>若调班时间过长，请手动刷新页面。</div>
                  </el-col>
                </el-row>
            </el-form>
            <footer>
                <el-button @click="cancel">取消</el-button>
                <el-button @click="add('ruleForm')" type="primary">确认</el-button>               
            </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
  changeStudentClass,
  getGradeList,
  getClass,
  getClassName,
  getGrade
} from "api/classAll";
import { mapGetters } from "vuex";
export default {
  name:"adjustmentDialog",
  props: {
    adjustmentData: {
      type: null,
      required: true
    }
  },
  created() {
    this.getClassTraining();
    this.getClassGeneral();
  },
  computed:{
    ...mapGetters(["uid", "schoolId", "schoolName", "schoolType"])
  },
  data() {
    return {
      ruleForm: {
        gradeName: "",
        classNum: "",
        sNickName: ""
      },
      rulesSelet: { required: true, message: "请选择", trigger: "change" },
      gradeList: [],
      classList: [],
      classNameArray: [],
      loading: false,
      upLoaing: false
    };
  },
  methods: {
    //普通学校
    getClassGeneral() {
      if(this.schoolType == 1){
        return 
      }
      getGrade(this.adjustmentData.family.schoolId).then(response => {
        this.gradeList = response.data.content;
      });
    },
    //培训学校 通过学校id获取班级编号
    getClassTraining() {
      // 通过学校id获取班级编号
      if (!this.adjustmentData.family.grade) {
        getClassName(this.adjustmentData.family.schoolId).then(response => {
          this.classList = response.data.content;
        });
      }
    },

    //模糊查询班级名称
    queryAllClassName(val) {
      if (!val) {
        // this.schoolList = [];
      } else {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          getClassName(
            !this.adjustmentData.family.schoolId
              ? null
              : this.adjustmentData.family.schoolId,
            !this.ruleForm.gradeName ? null : this.ruleForm.gradeName,
            null,
            // !this.ruleForm.classNum ? null : this.ruleForm.classNum,
            val
          ).then(response => {
            this.classNameArray = response.data.content;
          });
        }, 200);
      }
    },
    // 班级列表
    queryAllClass(grade) {
      if (grade) {
        this.ruleForm.classNum = "";
        // this.ruleForm.sNickName = this.getGradeName();
        // this.classIdIn = grade;
        // getClass(
        getClassName(
          !this.adjustmentData.family.schoolId
            ? null
            : this.adjustmentData.family.schoolId,
          !grade ? null : grade
        ).then(response => {
          this.classList = response.data.content;
        });
      }
    },
    classChange(cid) {
      //是否有年级id
      if (this.adjustmentData.family.grade) {
        this.ruleForm.sNickName = ''
        this.classList.find(item => {
          if (cid === item.pId) {
            this.ruleForm.sNickName = item.sNickName;
          }
        });

      } else {
        //获取培训学校班级名称
        this.ruleForm.sNickName = ''
        this.classList.find(item => {
          if (cid === item.pId) {
            this.ruleForm.sNickName = item.sNickName;
          }
        });

      }
    },
    nameChange(cid) {
      if (this.getClassNum(cid)) {
        this.ruleForm.classNum = cid;
      }
    },
    getGradeName() {
      var gn = "";
      this.gradeList.forEach(g => {
        if (g.grade == this.ruleForm.gradeName) {
          gn = g.gradeName;
        }
      });
      return gn;
    },
    getClassNum(cid) {
      var cn = "";
      this.classList.forEach(c => {
        if (c.pId == cid) {
          cn = c.sClassNum;
        }
      });
      return cn;
    },
    handleClose() {
      // this.$refs.ruleForm.resetFields();
      this.adjustmentData.dialogFormVisible = false;
    },
    add(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.upLoaing = true;
          changeStudentClass(
            this.adjustmentData.id,
            this.adjustmentData.family.classId,
            this.ruleForm.classNum,
            // '9f37e99e-8a03-44d9-aec9-5c7ee61f1b19',
            this.adjustmentData.family.grade,
            this.ruleForm.gradeName
          ).then(res => {
            this.upLoaing =false;
              this.adjustmentData.dialogFormVisible = false;
              this.$store.dispatch('UpdateCache', true);
              if( res.data.content){
                let newObj = {};
                for (let x in res.data.content) {
                  newObj[x] = res.data.content[x];
                }
                newObj.isTrue = true;       
                //给父组件传值
                this.$emit("adjustmentSon", newObj);
              } 
          }).catch(Error =>{
            this.upLoaing = false;
          })
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.adjustmentData.dialogFormVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}

section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
.title{
    text-align: center;
    color: #9E9E9E;
    margin-bottom: 15px;
    i{
      font-style: normal;
      color: #F44336;
      margin-right: 5px;
    }
}
</style>
